import React, { Component } from 'react'
import {
    View,
    StyleSheet,
    Image,
    Text
} from 'react-native'

import NavBar from '../../../../components/PublicHeader';

export default class details extends Component {
    constructor(props) {
        super(props)
        const {
            inputText,
            albumDatasHeadPortrait
        } = this.props.navigation.state.params
        this.state = {
            title: "照片详情",
            frameImg: require('../../../../assets/images/iconResources/Frame11.png'),
            // 相册列表
            detailsDatas: [albumDatasHeadPortrait],
            // 上传页面传递的文本
            inputText: [inputText]
        };
    }

    componentDidMount = () => { }

    render() {
        const {
            title,
            frameImg,
            detailsDatas
        } = this.state
        return (
            <View style={{ flex: 1 }}>
                {/* 导航栏 */}
                <NavBar
                    navigation={this.props.navigation}
                    title={title}
                    titleColor={"#fff"}
                    backgroundColor={"#333"}
                />
                <View style={styles.padlr}>
                    {detailsDatas.map((item, index) => (
                        <View key={index}>
                            {/* 相册展示 */}
                            <View style={styles.row} >
                                <View style={styles.item} >
                                    <Image style={styles.systemPrompt}
                                        source={{ uri: item.filePath }} />
                                </View>
                            </View>
                            {/* 详情描述 */}
                            <View style={styles.informationBox}>
                                <Image
                                    source={frameImg}
                                    style={styles.iconStyle}
                                />
                                <Text style={styles.information} >
                                    {item.title}
                                </Text>
                            </View>
                        </View>
                    ))
                    }
                </View>
            </View >
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        height: 32,
        backgroundColor: 'transparent'
    },
    padlr: {
        flexDirection: "column",
        justifyContent: "space-around",
        backgroundColor: "#333",
        flex: 1
    },
    row: {
        flexDirection: "row",
        justifyContent: "space-between",
        flexWrap: "wrap"
    },
    item: {
        flexDirection: "row",
        justifyContent: "space-between",
        marginTop: 10,
        width: "100%",
        height: 450
    },
    systemPrompt: {
        width: "100%",
        height: "100%"
    },
    informationBox: {
        paddingLeft: 20,
        paddingTop: 40,
        flexDirection: "row",
    },
    iconStyle: {
        width: 20,
        height: 20,
        marginRight: 15
    },
    information: {
        color: "#C9C9C9",
        fontSize: 16
    },
})